{% extends 'base.html' %}
{% load static %}
{% load custom_filters %}

{% block title %}学生评语管理{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- 标题和导出按钮区域 -->
    <div class="d-flex align-items-center justify-content-between mb-8">
        <!-- 左侧标题和描述 -->
        <div>
            <h2 class="text-primary mb-1 fs-3"><i class="bi bi-clipboard-check me-2"></i>学生评语管理</h2>
            <p class="text-muted fs-5">高效管理和导出学生评语信息</p>
        </div>

        <!-- 右侧导出按钮 -->
        <form method="post" action="{% url 'core:export_comments_to_word' %}">
            {% csrf_token %}
            <input type="hidden" name="semester_id" value="{{ selected_semester.id }}">
            <button type="submit" class="btn   shadow" id="export-btn">
                <i class="bi bi-file-word me-1"></i>导出到Word
            </button>
        </form>
    </div>

    <!-- 班级和学生列表 -->
    {% for class_student in class_students %}
        <div class="card mb-5 shadow-sm border rounded-lg overflow-hidden">
            <div class="card-header bg-primary text-white py-3">
                <h2 class="h5 mb-0 d-flex align-items-center"><i class="bi bi-building me-2"></i>{{ class_student.class_info.grade.name }}{{ class_student.class_info.name }}</h2>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-center" style="width: 80px;"><input type="checkbox" id="select-all-{{ class_student.class_info.id }}" class="form-check-input rounded border-primary cursor-pointer select-all-checkbox"> <span>全选</span></th>
                                <th class="w-25"><i class="bi bi-person me-1"></i>姓名</th>
                                <th><i class="bi bi-clipboard-check me-1"></i>评语状态</th>
                                <th style="width: 120px;"><i class="bi bi-wrench me-1"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for student in class_student.students %}
                                <tr>
                                    <td class="text-center py-3"><input type="checkbox" name="student_ids" value="{{ student.id }}" class="form-check-input student-checkbox rounded border-primary cursor-pointer" data-class-id="{{ class_student.class_info.id }}"></td>
                                    <td class="py-3">{{ student.name }}</td>
                                    <td class="py-3">
                                        {% with comment=class_student.student_comments|get_item:student.id %}
                                            {% if comment %}
                                                {% if comment.content %}
                                                    <span class="badge bg-success text-white px-3 py-1 rounded-pill"><i class="bi bi-check-circle me-1"></i>已填写</span>
                                                {% else %}
                                                    <span class="badge bg-warning text-dark px-3 py-1 rounded-pill"><i class="bi bi-exclamation-circle me-1"></i>未填写</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="badge bg-danger text-white px-3 py-1 rounded-pill"><i class="bi bi-x-circle me-1"></i>未生成</span>
                                            {% endif %}
                                        {% endwith %}
                                    </td>
                                    <td class="py-3">
                                        <a href="{% url 'core:student_comment_edit' student.id class_student.class_info.id selected_semester.id %}" class="btn btn-primary btn-sm w-100 shadow-sm">
                                            <i class="bi bi-pencil me-1"></i>编辑评语
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center py-5 text-muted">暂无学生数据</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% empty %}
        <div class="alert alert-info text-center p-5 rounded-lg border shadow-sm" role="alert">
            <i class="bi bi-info-circle text-2xl mb-2 block"></i>
            <p class="mb-0">您不是任何班级的班主任，无法查看学生评语。</p>
        </div>
    {% endfor %}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 导出功能实现
        const exportBtn = document.getElementById('export-btn');
        const exportForm = exportBtn.closest('form');

        exportBtn.addEventListener('click', function(e) {
            e.preventDefault();

            // 清除之前的学生ID
            const existingInputs = exportForm.querySelectorAll('input[name="student_ids[]"]');
            existingInputs.forEach(input => input.remove());

            // 收集选中的学生ID
            const studentCheckboxes = document.querySelectorAll('.student-checkbox:checked');
            studentCheckboxes.forEach(checkbox => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'student_ids[]';
                input.value = checkbox.value;
                exportForm.appendChild(input);
            });

            // 提交表单
            if (studentCheckboxes.length > 0 || confirm('未选择任何学生，是否导出全部学生评语？')) {
                exportForm.submit();
            }
        });

        // 全选功能实现
        const selectAllCheckboxes = document.querySelectorAll('.select-all-checkbox');

        selectAllCheckboxes.forEach(selectAll => {
            selectAll.addEventListener('change', function() {
                const classId = this.id.split('-').pop();
                const checkboxes = document.querySelectorAll(`.student-checkbox[data-class-id="${classId}"]`);
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
        });

        // 当学生checkbox状态改变时，更新全选checkbox状态
        const studentCheckboxes = document.querySelectorAll('.student-checkbox');
        studentCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const classId = this.getAttribute('data-class-id');
                const selectAllCheckbox = document.getElementById(`select-all-${classId}`);
                const classCheckboxes = document.querySelectorAll(`.student-checkbox[data-class-id="${classId}"]`);
                const allChecked = Array.from(classCheckboxes).every(cb => cb.checked);
                selectAllCheckbox.checked = allChecked;
            });
        });
    });
</script>
{% endblock %}